<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>报名页</title>
		<!--<meta name="viewport" content="user-scalable=no" >-->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" type="text/css" href="static/css/apply.css"/>
		<link rel="stylesheet" type="text/css" href="static/css/public.css"/>
		<script src="static/js/apply.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	<div class="apply">
			
		
		<!--头部海报-->
		<div class="top-poster">
			<img src="static/images/banner.png"/>
		</div>
		<!--倒计时-->
		<div class="activeCountdown">
				<MARQUEE class="scoll_txt" scrollAmount=4>
						<p>
								<span id="scrollText" class="scrollText">
									距离活动结束还剩：
									<span id="t_d"></span> 
									<span id="t_h"></span> 
									<span id="t_m"></span> 
									<span id="t_s"></span>
								</span>
							</p>

				</MARQUEE>
			
		</div>
		<!--填写报名信息-->
		<div id="apply-info" class="apply-info">
			<h3></h3>
			<p>昵称 <input type="tel" placeholder="昵称(最多不超过6个字)" id="name" onblur="a(this)"/></p>
			<p class="apply-userTel">联系方式<input type="tel" placeholder="请输入电话号码"/><span>联系方式不会外泄，仅作中奖通知</span></p>
			<p class="postalTit">个人介绍<span><textarea class="postal" cols="3" rows="10" placeholder="个人简介&拉票宣言" id="introduce" maxlength="36" ></textarea></span></p>
			<div class="apply-img">
				<div class="apply-img-left" style="background: url(static/images/apply-img.png) no-repeat center center;background-size: cover;position: relative;"><p style="    color: #ff4848;
    font-size: 12px;
    width: 185%;
    text-align: center;
    height: 24px;
    line-height: 24px;
    position: absolute;
    bottom: -24px;
    left: 85%;">上传后会对图片进行裁剪</p></div>
				
				<!--<div class="apply-img-center userImg1" style="background: url(static/images/apply-img-user1.png) no-repeat center center;background-size: cover;"></div>-->
				<img class="apply-img-center userImg1" style="width: 30%;height: 140px;border-radius: 4px;float: left;" src="static/images/apply-img-user2.png"/>
				<div class="apply-img-right">
					<div class="userImg2" style="position: relative;overflow: hidden;margin-bottom: 6px;">
						<img style="width: 100%;left: 0;top:auto; position: absolute;" src="static/images/apply-img-user9.png"/>
					</div>
					
					<div class="userImg3" style="position: relative;overflow: hidden;">
						<img style="width: 100%;left: 0;top:auto; position: absolute;" src="static/images/apply-img-user9.png"/>
					</div>
					
				</div>
				
				
			</div>
			<div class="commitBtn">
				<a id="applySubmit" href="javascript:;">提交报名</a>
			</div>
			<br style="clear: all;" />
		</div>
		<!--报名后个人展示-->
		<div id="apply-user" class="apply-user">
			<p>小可爱</p>
			<div class="apply-user-top">
				<div class="userImg">
					<div class="userImg-img1" class="userImg-img2" style="background: url(static/images/apply-img-user2.png) no-repeat center center;background-size: cover;">
					</div>
					<div class="userImg-img2" style="background: url(static/images/apply-img-user2.png) no-repeat center center;background-size: contain;">
					</div>
					<div class="userImg-img3" style="background: url(static/images/apply-img-user2.png) no-repeat center center;background-size: contain;">
					</div>
				</div>
				
			</div>
			<div class="apply-user-fot">
				<span>票数：808</span>
				<span>编号：087</span>
				<p>个人介绍：</p>
				<p><textarea class="use-dis" cols="3" rows="10" >我是一个小可爱， 多多给我投票</textarea></p>
				<a id="applyVote" class="unvote" href="javascript:;">点击投票</a>
			</div>	
		</div>
		<!--投票按钮提示弹窗-->
		<div id="alertHide" class="alertBox" >
			<div id="alertBg"></div>
			
			<div id="alertBody" class="alertBody">
				<div class="applyVote">
					<p>您给Ta投过票了</p>
					<p>每天只能投给他一次哦！</p>
					<a id="closeVote" class="closeVote" href="javascript:;">知道了</a>
				</div>
			</div>
		</div>
		<!--页面加载时判断关注-->
		<div id="onloadAlert" class="onloadAlert">
			<p>扫描二维码，获取报名资格</p>
			<img src="static/images/shareImg.png"/>
			
		</div>
		
		<div class="activeTitle">
			<h3>活动奖励</h3>
		</div>
		<!--活动奖励-->
		<div class="activePrize">
			<div class="firstPrize">
				<span class="sortPrizeTitleBg"></span>
				<div class="firstPrize-left">
					<img src="static/images/firstPrize.png"/>
				</div>
				<div class="firstPrize-right">
					<p class="firstPrize-title">马尔代夫七日游-<span>￥25000</span></p>
					<p class="activePrize-dis" style="color: #ff4848;">总票数第一可以获得（仅一名）</p>
				</div>
			</div>
			<div class="restPrize">
				<div class="secondPrize">
					<span class="sortPrizeTitleBg2"></span>
					<img src="static/images/secondPrize.png"/>
					<p class="secondPrize-title">iPhoneX</p>
					<p class="activePrize-dis">票数排行第二奖品</p>
				</div>
				<div class="threePrize">
					<span class="sortPrizeTitleBg3"></span>
					<img src="static/images/threePrize.png"/>
					<p class="threePrize-title">笔稿共读实体书</p>
					<p class="activePrize-dis">获得200票即可免费领取</p>
				</div>
				<br style="clear:both;">
			</div>
			
		</div>
		
			
		<!--底部切换标签-->
		<div class="footerTab">
			<ul>
				<li class="hometab"><a href="index.html">首页</a></li>
				<li class="apply-on active"><a href="apply.html">报名</a></li>
				<li class="votetab"><a href="vote.html">投票领书</a></li>
			</ul>
		</div>
		
	</div>	
	</body> 
	<script src="static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function a(val){
			if(val.value.length>=6){
				var toltxt = val.value.slice(0,6)
				$("#name").val(toltxt);
			}
		}
		function b(val){
			if(val.value.length >=36){
				var toldis = val.value.slice(0,6)
				$("#introduce").val(toldis);
			}
		}
	</script>
</html>
